<!--  -->
<template>
  <div class='Veterans zone'>
    <div class="veter_hot">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <div class="img_rczc">
              <img src="@/assets/img/zs-06.png" alt="">
            </div>
            <el-button class="seeMore" type="text" @click="seeMore"><span style="font-size:14px">&gt; &gt;</span>
              查看更多<span style="font-size:14px">&lt; &lt;</span>
            </el-button>
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane :name="item.id" v-for="(item,index) in businessGuide" :key="index"> -->
            <!-- <el-scrollbar style="height:290px;"> -->

            <div class="listDatas_count">
              <p class="listDatas info-list"
                :class="[index===1?'listDatastable':index===3 ? 'listDatastable':index===5?'listDatastable':'']"
                v-for="(item,index) in tableData.slice(0, 6)" :key="index" @click="rowList(item)">
                <!-- <span class="listContent">{{item.title}}</span> -->

                <span class="listContent"
                  :class="[item.titleFont===0?'fontWeight':item.titleFont===1 ? 'italic':item.titleFont?'underline':'']"
                  :style="{'color':color[item.titleColor]}"><span class="titled">·</span>{{item.title}}</span>
                <span>{{item.noticeTime}}</span>
              </p>
            </div>

            <div class="listDatas_count" style="float:right">
              <p class="listDatas"
                :class="[index===1?'listDatastable':index===3 ? 'listDatastable':index===5?'listDatastable':'']"
                v-for="(item,index) in tableData.slice(6, 12)" :key="index" @click="rowListTwo(item)">
                <!-- <span class="listContent">{{item.title}}</span> -->
                <span class="listContent"
                  :class="[item.titleFont===0?'fontWeight':item.titleFont===1 ? 'italic':item.titleFont?'underline':'']"
                  :style="{'color':color[item.titleColor]}"><span class="titled">·</span>{{item.title}}</span>
                <span>{{item.noticeTime}}</span>
              </p>
            </div>

            <!-- </el-scrollbar> -->
            <!-- </el-tab-pane> -->
            <!-- <el-tab-pane label="中心动态" name="second">
              <el-scrollbar style="height:290px;">
                <el-row type="flex" justify="space-between">
                  <el-col :span="11">
                    <p class="listDatas" v-for="o in 26" :key="o">
                      <span
                        class="listContent">深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）</span>
                      <span>2020-03-27 14:27:55</span>
                    </p>
                  </el-col>
                  <el-col :span="11">
                    <p class="listDatas" v-for="o in 26" :key="o">
                      <span
                        class="listContent">深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）</span>
                      <span>2020-03-27 14:27:55</span>
                    </p>
                  </el-col>
                </el-row>
              </el-scrollbar>
            </el-tab-pane> -->
            <!-- </el-tabs> -->
          </div>
        </el-col>
        <!-- <el-col :span="12"> -->
        <!-- <div class="grid-content bg-purple-light">
          <el-card class="box-card"> -->
        <!-- <div slot="header" class="clearfix">
              <span>退役军人专区</span>
            </div> -->
        <!-- <el-row :gutter="20">
              <el-col :span="8" v-for="o in 3" :key="o">
                <div class="img">
                  <img src="http://192.168.41.46/hnzz/M00/00/C7/wKgpLl6izseAK8lwAAd1ViTGdwA271.jpg" alt="">
                </div>
              </el-col>
            </el-row>
            <el-scrollbar style="height:170px;border-top: 1px solid #e5e5e5;">
              <p class="listDatas" v-for="o in 26" :key="o">
                <span
                  class="listContent">深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）深圳市拟发放博士后设站单位（2019年第一批次）</span>
                <span>2020-03-27 14:27:55</span>
              </p>
            </el-scrollbar> -->
        <!-- </el-card>
        </div> -->
        <!-- </el-col> -->
      </el-row>
    </div>

  </div>
</template>

<script>
import { getNavList, infoList } from '../../../api/info';
export default {
  name: 'veteransZone',
  components: {},
  data () {
    return {
      activeName: '15',
      businessGuide: [],
      searchForm: {
        menuId: null,
        page: 1,
        size: 15
      },
      tableData: [],
      // feat：公告中心动态文字颜色
      color: ['#1793fc', '#76c941', '#2cbdb2', '#797fc9', '#ffb038', '#ff4f3e'],
      // feat： 查看更多跳转的值
      paneName: 15
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleClick (tab, event) {
      console.log(tab, event);
      this.paneName = tab.paneName
      this.infoListNotice(tab.name)
    },
    // 获取路由标题
    getNavList (code) {
      getNavList(code).then(data => {
        if (data.success) {
          this.businessGuide = data.data || [];
          this.infoListNotice(this.businessGuide[0].id)
          // localStorage.setItem(`nav1`, JSON.stringify(this.businessGuide));
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    // 公告
    infoListNotice (code) {
      this.searchForm.menuId = code
      infoList(this.searchForm).then((res) => {
        if (res.success) {
          this.tableData = res.data.records || [];
        } else {
          this.$message.error(`${res.msg}`);
        }
      })
    },
    rowList (row) {
      if (row.type == 1) { // 本站公告
        this.$router.push({
          path: `/infoDetail`,
          query: {
            id: row.id,
            type: 2
          }
        })
      } else {  // 外部链接
        window.open(row.url)
      }
    },
    rowListTwo (row) {
      if (row.type == 1) { // 本站公告
        this.$router.push({
          path: `/infoDetail`,
          query: {
            id: row.id,
            type: 2
          }
        })
      } else {  // 外部链接
        window.open(row.url)
      }
    },
    // 查看更多
    seeMore () {
      this.$router.push({
        path: `/infoList`,
        query: {
          id: this.paneName,
          type: 2,
          ptan: 1,
          code: 1
        }
      })
    }
  },
  created () {
    // 站点公告
    this.getNavList(5)
  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.Veterans {
    /* width: 1200px; */
    margin: 0 auto;
    margin-top: 90px;
    /* background: linear-gradient(45deg, #333 25%, #fff 0, #fff 50%, #333 0, #333 75%, #fff 0);
    background-size: 2px 2px; */
    height: 400px;
    background-image: url('../../../assets/img/zs-bg.png');
}
.veter_hot {
    width: 1200px;
    margin: 0 auto;
}
.grid-content {
    /* width: 589px; */
    height: 364px;
    /* background: rgba(255, 255, 255, 1); */
    opacity: 1;
}
.bg-purple-light {
    width: 600px;
}
.bg-purple-light .img {
    width: 174px;
    height: 96px;
    background: rgba(213, 213, 213, 1);
    opacity: 1;
    cursor: pointer;
}
.bg-purple-light .img img {
    width: 100%;
    height: 100%;
}
.bg-purple {
    position: relative;
}
.seeMore {
    position: absolute;
    z-index: 60;
    top: -17px;
    right: 25px;
    color: #909399;
}

.Veterans /deep/ .el-tabs__nav {
    padding-left: 20px;
}
.Veterans /deep/ .el-tabs__item {
    line-height: 58px;
    height: 58px;
}
.Veterans /deep/ .el-tabs__active-bar {
    left: 19px;
    height: 4px;
    background-color: #000000;
}
.Veterans /deep/ .el-tabs__item.is-active {
    color: #000000;
    font-weight: 600;
}

.listDatas {
    height: 41px;
    line-height: 41px;
    /* padding: 0 20px; */
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    /* border-bottom: 1.5px solid rgba(232, 232, 232, 1); */
}
.listContent {
    width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* 卡片 */
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}

.box-card {
    /* width: 480px; */
}
.info-list .blue {
    color: #1793fc;
}
.info-list .fluorescentGreen {
    color: #76c941;
}
.info-list .wathet {
    color: #2cbdb2;
}
.info-list .violet {
    color: #797fc9;
}
.info-list .orange {
    color: #ffb038;
}
.info-list .red {
    color: #ff4f3e;
}
.info-list /deep/ .fontWeight {
    font-weight: bolder;
}
.info-list /deep/ .italic {
    font-style: italic;
}
.info-list /deep/.underline {
    text-decoration: underline;
}
.listDatas_count {
    background: #fff;
    margin-top: 50px;
    width: 580px;
    display: inline-block;
    padding-bottom: 35px;
    padding-top: 10px;
}
.img_rczc {
    position: absolute;
    top: -20px;
}
.titled {
    font-size: 30px;
    float: left;
    margin-right: 10px;
    color: #c0c4cc;
}
.listDatastable {
    background: rgb(246, 246, 246);
}
</style>